<template>
  <div class="header">
      <div class="middle">
        <div class="wraper">
          <swiper :options="swiperOption" >
            <swiper-slide v-for="item of swiperList" :key="item.id">
              <span class="swiperTitle">{{item.title}}</span>
              <span class="swiperBom">专业前景分析>></span>
              <img :src="item.img"  class="bannerimg" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'MiddleArticle',
  props: {
    swiperList:Array,
  },
  data () {
    return {
      swiperOption : {
        pagination:'.swiper-pagination',
        autoplay:2500,
        speed:1000,
        loop:true,
        effect :'fade',
      }
    }
  }

}
</script>

<style lang="stylus" scoped>
  @import '~styles/commonstyl.styl'
  .wraper >>>.swiper-pagination-bullets
    bottom:1.05rem;
  .wraper >>>.swiper-pagination-bullets-active
               bottom:82px;
               background :#fff
  .header
    background :#e3f9ff
    .middle
      width:60%
      margin-left:20%
      .wraper
        overflow hidden
        width:100%
        height:0
        padding-bottom:46%
        .bannerimg
          width:100%
          height:100%
        .swiperTitle
          position :absolute
          height:.34rem
          line-height:.34rem
          color:#fff
          padding-left:.32rem
          padding-top:.2rem
        .swiperBom
          position:absolute
          right:0.1rem
          bottom:1.2rem
          color:#fff
          text-align:center
          border:1px solid #fff
          padding:0.1rem 0.1rem
</style>
